<template>
  <div class="level-box">
    <div class="minilevel-box">
      <div class="le-top">
        <!-- 等级头 -->
        <div class="le-top1">
          <div class="grade-b">
            <div class="g-b1">
              当前等级:
              <div class="g-b2">
                <span class="g-b3"></span>
                {{userlevels.level}}
              </div>
            </div>
            <!-- 等级条 -->
            <div class="lv-mbox">
              <!-- 单进度条 -->
              <div  class="lv" :style="{background :'#dcdfe6' }" >
                <div :style="{width :animates }" class="lv animate__animated animate__slideInLeft" ></div>
              </div>
              <div class="lv-i"  >
                <!-- 数字 -->
                <div class="lv-figure">
                  <span
                    :class="{ zo: userlevels.level == index }"
                    class="z"
                    v-for="(item, index) in 10"
                    :key="index"
                  >
                    {{ index }}</span
                  >
                  <span class="z2">10</span>
                </div>
                <!-- 竖线 -->
                <div class="lv-iv">
                  <span
                    class="lv-li"
                    v-for="(item, index) in 9"
                    :key="index"
                  ></span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 当前等级特权 -->

        <div class="le-top2">
          <span>当前等级特权:</span>
          <li v-for="(item, index) in info" :key="index">{{ item }}</li>
        </div>

        <!-- 了解等级特权 -->
        <div class="le-top3">
          <a>了解等级特权></a>
        </div>

        <div class="le-btn">
          距离下一个等级：
          <div class="le-btn1"><span class="le-btn2"></span>{{userlevels.level+1}}</div>
        </div>
        <!-- 歌曲 -->
        <div class="uitl">
          <span class="singmusic">听歌</span>
          <!-- w160px -->
          <div class="bar">
            <div class="bar2">
              <div class="bar3" :style="{ width: percentPlayCount }"></div>
            </div>
          </div>
          <span class="playcount">还需听歌{{ residuePlayCount }}首</span>
        </div>
        <!-- 登录 -->
        <div class="uitl">
          <span class="singmusic">登录</span>
          <!-- w160px -->
          <div class="bar">
            <div class="bar2">
              <div class="bar3" :style="{ width: percentLoginCount }"></div>
            </div>
          </div>
          <span class="playcount">还需登录{{ residueLoginCount }}天</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import "animate.css";
export default {
  data() {
    return {
      // 获取到的数据
      userlevels: {},
      // 剩余的歌曲
      residuePlayCount: 0,
      //  剩余的天
      residueLoginCount: 0,
      // 切割的文本
      info: [],
      //   歌曲百分比
      percentPlayCount: "",
      // 天数百分比
      percentLoginCount: "",
      animates : ""
    };
  },
  mounted() {
    this.getUserLevel();
  },
  methods: {
    async getUserLevel() {
      const result = await this.$API.reqUserLevel({ cookie: this.cookie });
      //    console.log(result)
      if (result.code == 200) {
        this.userlevels = result.data || {};
        // 求剩余歌曲
        this.residuePlayCount =
          result.data.nextPlayCount - result.data.nowPlayCount;
        // 求剩余天数
        this.residueLoginCount =
          result.data.nextLoginCount - result.data.nowLoginCount;
        // 对￥进行切割
        this.info = result.data.info.split("$");
        // 求歌曲百分比
        this.percentPlayCount =
          (result.data.nowPlayCount / result.data.nextPlayCount) * 100 + "%";
        // 求天数百分比
        this.percentLoginCount =
          (result.data.nextLoginCount / result.data.nowLoginCount) * 100 + "%";
        this.animates =( result.data.level + result.data.progress)*10 +"%"
      } else {
        this.$msg.error("获取我的等级失败");
      }
    },
  },
  computed: {
    ...mapState({
      //cookie
      cookie: (state) => {
        return state.User.loginmessage.cookie;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
.zo {
  background-position: 0 -50px;
  background-image: url("~@/assets/image/mylevel.png");
  color: #fff;
  text-align: center;
}
.level-box {
  width: 984px;
  margin: 0 auto;
  background-color: rgb(255, 255, 255);
  .minilevel-box {
    padding-top: 80px;
    width: 844px;
    min-height: 500px;
    margin: 0 auto;
    .le-top {
      .le-top1 {
        width: 100%;
        margin-bottom: 20px;
        .grade-b {
          .g-b1 {
            display: flex;
            font-size: 22px;
            .g-b2 {
              position: relative;
              z-index: 1;
              zoom: 1;
              height: 32px;
              line-height: 32px;
              margin-left: 35px;
              zoom: 1;
              font-family: Arial;
              font-size: 24px;
              font-weight: 700;
              color: #e03a24;
              font-style: italic;
              .g-b3 {
                position: absolute;
                left: -30px;
                top: 0;
                z-index: 1;
                width: 28px;
                height: 28px;
                background-position: left 6px;
                background-image: url("~@/assets/image/mylevel.png");
              }
            }
          }
          .lv-mbox {
            overflow: hidden;
            width: 100%;
            margin-top: 10px;
            // background-color: #363131;
            color: #c8c6cc;
            height: 60px;
            position: relative;
            .lv {
              position: absolute;
              bottom: 0;
              width: 100%;
              border-radius: 15px;
              height: 10px;
              background-color: #e03a24;
            }
            .lv-i {
              // 数字
              .lv-figure {
                display: flex;
                width: 100%;
                position: absolute;
                bottom: 15px;
                .z {
                  width: 25px;
                  height: 28px;
                  line-height: 24px;
                  display: inline;
                  margin-right: 7%;
                  text-align: center;
                }
                .z2 {
                  width: 25px;
                  height: 28px;
                  display: inherit;
                  position: absolute;
                  right: 0;
                }
              }

              //   竖线
              .lv-iv {
                display: flex;
                width: 100%;
                position: absolute;
                bottom: 0;
                .lv-li {
                  display: inline;
                  width: 1px;
                  background: #fff;
                  height: 10px;
                  margin-left: 10%;
                }
              }
            }
          }
        }
      }

      .le-top2 {
        span {
          font-size: 22px;
        }
        li {
          font-size: 16px;
          list-style-type: disc;
          line-height: 30px;
          color: #363131;
        }
        li::marker {
          color: red;
        }
      }
      .le-top3 {
        margin-top: 50px;
        // margin: 50px auto;
        width: 100%;
        padding-bottom: 50px;
        border-bottom: 1px solid #e3e3e3;
        a {
          color: #719ad8;
        }
      }
      .le-btn {
        margin-top: 20px;
        .le-btn1 {
          position: relative;
          padding-left: 15px;
          display: inline;
          zoom: 1;
          font-family: Arial;
          font-size: 18px;
          font-weight: 700;
          color: #e03a24;
          font-style: italic;

          .le-btn2 {
            position: absolute;
            left: -12px;
            top: 0;
            width: 25px;
            height: 22px;
            background-position: 0 -25px;
            background-image: url("~@/assets/image/mylevel.png");
          }
        }
      }
      .uitl {
        display: flex;
        .singmusic {
        }
        .bar {
          width: 160px;
          // border: 2px solid #666;
          margin: auto 20px;
          .bar2 {
            position: relative;
            width: 160px;
            // border: 2px solid #666;
            height: 4px;
            background-color: #666;
            .bar3 {
              position: absolute;
              width: 80%;
              height: 4px;
              background-color: red;
            }
          }
        }
        .playcount {
        }
      }
    }
  }
}
</style>
